<template>
    <e-charts class="chart" :option="option"></e-charts>
</template>
<script>
  import { trendData } from "@/api/system/chartConfig";
//
export default {
    name:"chartView",
    dicts: [

    "device_unit"
  ],
    computed:{
        option(){
            return{
                backgroundColor:"#a8aaac",
                title:{
                    text: this.name,
                    left:"center",
                    textStyle: {
                    fontSize: 30
                    }
                },
                legend: {bottom:"-5px"},
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                color: this.colors,
                xAxis: [{
                    // show:false,
                    name:'时刻',
                    type: 'category',
                     axisLine: {

                            onZero: false,
                            lineStyle: {
                            }
                        },
                    data:this.xDatas// x轴
                }],
                yAxis: {
                    name:this.unit,
                    type: 'value'//y轴
                },
                series:this.serials
            }
        }
    },
    created(){
        // setInterval(() =>{
           this.getData();
        // },100000);
    },
    methods:{

      async  getData(){

        await    trendData({deviceGraphicalId:this.currentId}).then( async (response) =>
         {
           this.data =  await response.data;

           this.colors =     this.data.data.map(d=>d.color);
          this.xDatas= this.data.xData;
            this.serials=     this.data.data.map(item=>{
                    return{
                        name:item.deviceName,
                        smooth:true,
                        type:'line',
                        data: JSON.parse(item.value)
                    }
            });

        })
    }

},

    data() {
        return{
           data: [],
           colors:[],
           serials:[],
           xDatas:[],
           currentId: this.$route.query.currentId,
           name:this.$route.query.name,
           unit:this.$route.query.unit==1?'Kpa':'°C',

        }
    },
}
</script>

<style scoped>
.chart{
    height: 400px;
}
</style>
